<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>复合选择器</title>
    <style>
      /*把 ol 里面的 li 选出来改为 pink 颜色*/
      /*后代选择器*/
      /* 语法： 元素1 元素2 {样式声明} */
      /*元素2 一定是 元素1 的后代（元素2可能是儿子，还可能是孙子）,元素1和元素2之间用空格隔开*/
      /*只改变后代里面的数值*/
      ol li {
        color: pink;
      }
      /*变式*/
      .nav li a {
        color: red;
      }

      /*子元素选择器*/
      /*语法： 元素1 > 元素2 { 样式声明 }*/
      /*上述语法表示选择元素1 里面的所有直接后代（子元素）元素2*/
      .nv > a {
        color: green;
      }

      /*并集选择器*/
      /*可以选择多组标签同时为他们定义相同的样式*/
      /*语法：元素1 , 元素2 { 样式声明 } 注：此处是英文逗号*/
      /*任何形式的选择器都可以作为并集选择器的一部分*/
      /*语法规范，常喜欢把并集选择器竖着写*/
      /**/
      /*要求1：请把熊大和熊二改为粉色*/
      div,
      p {
        color: pink;
      }
      /*要求2：请把熊大和熊二改为粉色,还有老婆们改为粉色*/
      div,
      p,
      .pig li,
      ol > li {
        color: pink;
      }

      /*伪类选择器*/
      /*用冒号（ : )表示*/
      /*1.链接伪类选择器*/
      /*
      a:link  选择所有未被访问的链接
      a:visited 选择所有已被访问的链接
      a:hover 选择鼠标指针位于其上的链接
      a:active 选择活动连接（鼠标按下未弹起的链接
      */
      /*书写时注意下述的顺序，否则会伪选择器功能可能失效*/
      a:link {
        color: aqua;
        text-decoration: none;
      }
      a:visited {
        color: red;
        text-decoration: none;
      }
      .sh:hover {
        color: red;
      }
      a:hover {
        color: blueviolet;
        text-decoration: none;
      }
      a:active {
        color: chartreuse;
        text-decoration: none;
      }

      /* focus 伪类选择器 */
      /* :focus 伪类选择器用于获取焦点（光标）的表单元素*/
      /* 一般情况下 <input> 类表单元素才能获取，因此这个选择器主要针对表单元素来说的*/
      input:focus {
        background-color: pink;
        color: red;
      }
    </style>
  </head>
  <body>
    <h4>后代选择器</h4>
    <ol>
      变色么
      <li>我是ol的孩子</li>
      <li>我是ol的孩子</li>
      <li>我是ol的孩子</li>
    </ol>
    <ul>
      <li>我是ul的孩子</li>
      <li>我是ul的孩子</li>
      <li>我是ul的孩子</li>
    </ul>
    <ul class="nav">
      <li>我是ul的孩子</li>
      <li>我是ul的孩子</li>
      <li>我是ul的孩子</li>
      <li><a href="#">不会变颜色</a></li>
      <li><a href="#">不会变颜色</a></li>
      <li><a href="#">不会变颜色</a></li>
      <li><a href="#">不会变颜色</a></li>
    </ul>

    <h4>子元素选择器</h4>
    <div class="nv">
      <a href="#">我是儿子</a>
      <p>
        <a href="#">我是孙子</a>
      </p>
    </div>

    <h4>并集选择器</h4>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
      <li>影</li>
      <li>胡桃</li>
      <li>甘雨</li>
    </ul>
    <ol>
      <li>心海</li>
      <li><a href="">班尼特</a></li>
    </ol>

    <h4>伪类选择器</h4>
    <a href="#">雷电将军</a>
    <h5 class="sh">影宝贝</h5>

    <h4>focus 伪类选择器</h4>
    <input type="text" />
    <input type="text" />
    <input type="text" />
  </body>
</html>
